<html>
<head>
<link href="initiator.css" rel="stylesheet" type="text/css">
<body>
<img src="resource.php?type=image&random=1&size=100">
<div class="image-background">This div has background image set from CSS.</div>
<div class="image-background-3">This div has background image set from inline CSS.</div>
<div style="font-family: Example">This div will have font set from CSS.</div>
<div style="font-family: Example2">This div will have font set from inline CSS.</div>
<div id="div-without-class">This div will have background image set from JavaScript.</div>
<style>@import "style.css";</style>
<style>
  .image-background-3 {
    background-image: url("resource.php?type=image&random=1&size=300");
  }
  @font-face {
      font-family: Example2;
      src: url("example2.ttf");
  }
</style>

<script>
function loadData() {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "resource.php?type=image&random=1&size=400", true);
    xhr.send(null);
    console.log("Done.");
}
</script>
<iframe src="empty.html" onload="loadData()"></iframe>
<script type="module">
import {x} from "./module1.js";
console.log("Done.");
</script>
</body>
</html>
